<template>
  <el-form>
    <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
    <div style="margin: 15px 0;"></div>
    <el-checkbox-group v-model="checkedTypes" @change="handleCheckedCitiesChange">
      <el-checkbox v-for="type in types" :label="type.id" :key="type.id" :disabled="type.disable">{{type.value}}</el-checkbox>
    </el-checkbox-group>
  </el-form>
</template>

<script>
  export default {
    name:"CustomSelect",
    props:['options'],
    data:function () {
      return {
        checkAll: false,
        checkedTypes: [],
        types: this.options,
        isIndeterminate: true
      }
    },
    computed:{
      len(){
        return this.types.filter(val => !val.disable).length
      }
    },
    methods: {
      handleCheckAllChange(val) {
        this.checkedTypes = val ? this.types.filter(val => !val.disable).map(val => val.id) : [];
        this.isIndeterminate = false;
      },
      handleCheckedCitiesChange(value) {
        let checkedCount = value.length;
        this.checkAll = checkedCount === this.len;
        this.isIndeterminate = checkedCount > 0 && checkedCount < this.len;
      }
    }
  }

</script>